<template>
      <div class="login-main animate__animated animate__bounceInLeft">
      <van-cell-group inset>
        <van-field
          v-model="formQuery.email"
          name="validator"
          left-icon="envelop-o"
          placeholder="请输入邮箱"
        />
        <van-field
         v-model="formQuery.password"
          type="password"
          left-icon="shield-o"
          placeholder="请输入密码"
          name="password"
          />
      </van-cell-group>
      <van-button type="primary" block class="login-button" @click="loginSubmit()">登录</van-button>
      <p class="forgetButton" @click="skipto('forget')">忘记密码？</p>
      <div class="line-box">
					<div class="line"></div>
					<div class="line-text">或</div>
					<div class="line"></div>
				</div>
      <div class="footer">
        还没有账号？<span class="register" @click="skipto('register')">立即注册</span>
      </div>
      </div>

</template>
<script setup>
import { showSuccessToast, showFailToast } from 'vant';
import { ref, defineEmits } from 'vue'
import { loginService } from '@/api/Login'
import { useRouter } from 'vue-router';

const router = useRouter()


const formQuery = ref({
  email: '',
  password: ''
})
const skip = defineEmits(['skipto'])
const validator = (val) => {
  return '不合法'
}

const skipto = (newpage) => {
  skip('skipto', newpage)
}
/**
 * 登录提交
 */
const loginSubmit = () => {
  if  (formQuery.value.email && formQuery.value.password) {
    loginService(formQuery.value)
    .then(res => {
      localStorage.setItem('token', res.data)
      router.push('/home')
    })

  } else {
    showFailToast('请填写账号和密码')
  }
}
</script>
<style lang="scss" scoped>
.login {
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
    .title {
      margin-top: 70px;
      font-size: 22px;
      letter-spacing: 2px;
      color: #fff;
    }
    .login-main {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      padding: 20px;
      width: 90%;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      border-radius: 24px;
      box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
      :deep(.van-field__left-icon) {
        color: #72bddb;
      }
      :deep(.login-button) {
        background: #72bddb;
        margin-top: 20px;
        width: 70vw;
        border-radius: 15px;
        border: none;
      }
      :deep(.van-cell-group){
        width: 80vw;
      }
      .line-box {
          width: 100%;
					display: flex;
					align-items: center;
					margin: 20px 0px;

					.line {
						flex: 1;
						height: 2px;
						background: rgba(0, 0, 0, 0.1);
					}

					.line-text {
						padding: 0 10px;
						color: #999;
						font-size: 14px
					}
				}

        .footer {
          font-size: 14px;
          color: #999;

          .register {
            color: #72bddb;
          }
        }
    }

}


::v-deep.van-cell-group {
  background-color: transparent;
}
::v-deep.van-cell {
  background-color:transparent;
}
.forgetButton {
  text-align: right;
  width: 100%;
  color: #87CEEB;
  font-size: 12px;
  margin-top: 15px;
}
</style>